<template>
    <section class="area_share_Server layout flexbox">
  			<!--三栏布局-->
  		<!--<article class="left-center-right">-->
  			<el-row>
			  <el-col :span="7">
			  	<div class="left">
		        	<div class="basc_info">
		        		<p class="left_item_title"><span></span>基本信息</p>
			        	<p><span class="span_title">服务名称</span><span class="span_text">{{baseInfo.name}}</span></p>	
			        	<p><span class="span_title">返回信息类别</span><span  class="span_text">{{baseInfo.infoTypeNames}}</span></p>	
			        	<p>
			        		<span  class="span_title">所属网段</span>
			        		<span  class="span_text">{{baseInfo.segmentName}}</span>
			        		<span  class="span_title">所属区域</span>
			        		<span  class="span_text">{{baseInfo.areaName}}</span>
			        	</p>	
			        	<p>
			        		<span  class="span_title">所属业务类别</span>
			        		<span  class="span_text">{{baseInfo.businessTypeNames}}</span>
			        		<span  class="span_title">服务方</span>
			        		<span  class="span_text">{{baseInfo.producerName}}</span>
			        	</p>	
		        	</div>
		        	
		        	<div class="request_all">
		        		<p class="left_item_title"><span></span>请求汇总</p>
			        	<div class="all_time">
			        		<p class="all_time_num">{{requestAll.allCount}}</p>
			        		<p class="all_time_text">总请求次数</p>
			        	</div>
			        	<el-row>
						  <el-col :span="8">
						  	<p class="all_time_num">{{requestAll.yearCount}}</p>
			        		<p class="all_time_text">本年请求</p>
						  </el-col>
						  <el-col :span="8">
						  	<p class="all_time_num">{{requestAll.monthCount}}</p>
			        		<p class="all_time_text">本月请求</p>
						  </el-col>
						  <el-col :span="8">
						  	<p class="all_time_num">{{requestAll.weekCount}}</p>
			        		<p class="all_time_text">本周请求</p>
						  </el-col>
						</el-row>
		        	</div>
		        	
		        	
		        	<div class="same_paiming">
		        		<p class="left_item_title"><span></span>同类排名</p>
		        		<div class="same_paiming_select">
		        			<el-select @change="changeSamePaimingSelect" v-model="samePaimingSelect" placeholder="请选择">
							    <el-option
							    v-for="(item,index) in paimingOption"
							      :key="index"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
						 	</el-select>
		        		</div>
			        	<el-row class="same_paiming_row">
						  <el-col :span="8">
						  	<p class="all_time_num">{{paimingForm.businessTypeName}}</p>
			        		<p class="all_time_text">业务类别</p>
						  </el-col>
						  <el-col :span="8">
						  	<p class="all_time_num">{{paimingForm.businessTypeServiceCount}}</p>
			        		<p class="all_time_text">同类服务</p>
						  </el-col>
						  <el-col :span="8">
						  	<p class="all_time_num">{{paimingForm.preMonthOrder}}</p>
			        		<p class="all_time_text">上月排名</p>
						  </el-col>
						</el-row>
						<el-row class="same_paiming_row">
						  <el-col :span="8">
						  	<p class="all_time_num">{{paimingForm.currentMonthOrder}}</p>
			        		<p class="all_time_text">本月排名</p>
						  </el-col>
						  <el-col :span="8">
						  	<p class="all_time_num">{{paimingForm.riseCount}}</p>
			        		<p class="all_time_text">本月增长</p>
						  </el-col>
						  <el-col :span="8">
						  	<p class="all_time_num">{{paimingForm.riseRate}}</p>
			        		<p class="all_time_text">本月增长率</p>
						  </el-col>
						</el-row>
		        	</div>
		        	
		        	<div class="apply_time" v-if="showApplyTime">
		        		<p class="left_item_title"><span></span>响应时间</p>
		        		<div class="chooseDate">
		        			 	<el-date-picker
		        			 	@change = "changeApplyTimeChooseYear"
							      v-model="applyTimeChooseYear"
							      type="year"
							       value-format="yyyy"
							      placeholder="选择年">
							    </el-date-picker>
		        		</div>
		        		<div class="diy_echart_apply_time">
		        			<echart-pie :className="applyTimeClassName"  :diyOption="optionLine" :idName="applyTimeId"></echart-pie>
		        		</div>
		        	</div>
		        </div>
			  </el-col>
			  
			  <el-col :span="10">
			  	<div class="center">
	         		<div class="dangan_guiji">
	         			<p class="left_item_title"><span></span>档案轨迹</p>
	         			<div class="guding-500" >
	         			<img  style="width: 100%;" src="../../../images/areaRecource/areaRecource01_05.png"/>
	         			<div class="dangan_guiji_div-1">
	         				
	         			</div>
		         			<span class="dangan_guiji_span-1 dangan_guiji_span">黄明明</span>
		         			<span class="dangan_guiji_span-2 dangan_guiji_span">{{dangAn.pushTime}}</span>
		         			<span class="dangan_guiji_span-3 dangan_guiji_span">张三</span>
		         			<span class="dangan_guiji_span-4 dangan_guiji_span">{{dangAn.createTime}}</span>
		         			<span class="dangan_guiji_span-5 dangan_guiji_span">{{dangAn.requesterNum}}</span>
		         			<span class="dangan_guiji_span-6 dangan_guiji_span">{{dangAn.allCount}}</span>
		         			<span class="dangan_guiji_span-7 dangan_guiji_span">{{dangAn.allErrorCount}}</span>
		         			<span class="dangan_guiji_span-8 dangan_guiji_span">{{dangAn.fuwufang}}</span>
		         			<span class="dangan_guiji_span-9 dangan_guiji_span">{{dangAn.infoTypeNames}}</span>
	         			</div>
	         		</div>
	         		
	         		
	         		<div class="healthy_riji">
	         			<p class="left_item_title"><span></span>健康日志</p>
		         		<div class="healthy_riji_title">
		        			<span><i class="fuwuzhiliang"></i>服务异常次数</span>
		        			<span><i class="pingjunfuwuzhiliang"></i>平均服务异常次数</span>
		        		</div>
	         			<div class="diy_echart_healthy_riji">
	         				<div class="chooseYue">
	         					 	<el-date-picker
	         					 		style = "width: 120px;"
	         					 	 @change="changeHealthyRiChooseYue"
								      v-model="healthyRiChooseYue"
								      type="month"
								      value-format="yyyy-MM"
								      placeholder="选择月">
								    </el-date-picker>
	         				</div>
	         				<echart-pie :className="healthyClassName"  :diyOption="optionLine2" :idName="healThyId"></echart-pie>
	         			</div>
	         		</div>
	        	</div>
			  </el-col>
			  
			  <el-col :span="7">
			  	<div class="right">
		        	<div class="request_total" v-if="showRequestTotal">
		        		<p class="left_item_title"><span></span>请求方统计</p>
		        		<div class="diy_echart_request_total">
		        			<echart-pie :className="requestTotaClassName" :diyOption="optionPie" :idName="requestTotalId"></echart-pie>
		        		</div>
		        		<div class="request_total_detail">
		        			<p v-for="item in requestTotalLi">
		        				<span class="request_total_detail_pie" :style="{'background':item.color}"></span>
		        				<span>{{item.requesterName}}</span>
		        			</p>
		        		</div>
		        	</div>
		        	<!--<div class="apply_time">
		        		<p class="left_item_title"><span></span>采集耗时</p>
		        		<div class="chooseDate">
		        			 	<el-date-picker
							      v-model="applyTimeChooseYear"
							      type="year"
							      placeholder="选择年">
							    </el-date-picker>
		        		</div>
		        		<echart-pie :className="applyTimeClassName"  :diyOption="optionLine" :idName="applyTimeId"></echart-pie>
		        	</div>-->
		        	<div class="request_time">
		        		<p class="left_item_title"><span></span>请求次数</p>
		        		<div class="chooseDate">
		        			 	<el-date-picker
							      v-model="requestTimeChooseYear"
							      type="year"
							      @change="changeRequestTime"
							      value-format="yyyy"
							      placeholder="选择年">
							    </el-date-picker>
		        		</div>
		        		<div class="diy_echart_request_time">
		        			<echart-pie :className="requestTimeClassName"  :diyOption="optionBar" :idName="requestTimeId"></echart-pie>
		        		</div>
		        	</div>
		        	<div class="server_quarce" v-if="showServerQuarce">
		        		<p class="left_item_title"><span></span>服务质量</p>
		        		<div class="chooseDate" style="top: 45px;">
		        			 	<el-date-picker
		        			 		class="serverQualityChooseYear"
		        			 		style="width: 115px;"
							      v-model="serverQualityChooseYear"
							       @change="changeserverQualityChooseYear"
							      type="year"
							      value-format="yyyy"
							      placeholder="选择年">
							    </el-date-picker>
		        		</div>
		        		<div class="server_quarce_title">
		        			<span><i class="fuwuzhiliang"></i>服务质量</span>
		        			<span><i class="pingjunfuwuzhiliang"></i>平均服务质量</span>
		        		</div>
		        		<div class="diy_echart_server_quarce">
		        				<echart-pie :className="serverQuarceClassName"  :diyOption="optionRadra" :idName="serverQuarceId"></echart-pie>
		        		</div>
		        	</div>
		        </div>
			  </el-col>
			</el-row>
	        


      <!--</article>-->

    </section>
</template>

<script>
    import echartPie from "./echartPie"
//  import {color1,color2} form "./"
	import echarts from 'echarts';
	import {
		computedGetBaseInfo,
		computedRequestCount,
		computedServiceQuality,
		computedHealth,
		copmutedPaiMing,
		computedApplyTime,
		computedRequestTotal,
		computedRequestCountTime,
	} from "../css_js_img/computedareaResource"
    export default {
    	components:{
    		echartPie,
    	},
    	props:{
    		danganId:Number
    	},
        data() {
          return {
          		serverType:'share',/*共享类型*/
          		nowYear:'',
          		nowMonth:'',
          		paimingForm:{
          			businessTypeName:'无',
          			businessTypeServiceCount:'0',
          			preMonthOrder:'0',
          			currentMonthOrder:'0',
          			riseCount:'0',
          			riseRate:'0',
          		},
          		requestTotalLi:[],
          		paimingOption:[],
          		showServerQuarce:false,
          		showRequestTotal:false,
          		showApplyTime:true,
          		healThyId:'healThyId',
          		applyTimeId:'applyTimeId',
          		serverQuarceId:'serverQuarceId',
          		requestTimeId:'requestTimeId',
          		requestTotalId:'requestTotalId',
          		healthyClassName:'chats_line2',
          		applyTimeClassName:'chats_line',
          		serverQuarceClassName:"chats_radra",
          		requestTimeClassName:'echats_bar',
          		requestTotaClassName:'echats_bing',
          		requestTimeChooseYear:'',
          		applyTimeChooseYear:'',
          		healthyRiChooseYue:'',
          		serverQualityChooseYear:'',
          		samePaimingSelect:'',
          		baseInfo:{},
          		requestAll:{},
          		dangAn:{
          			infoTypeNames:'',
          			fuwufang:'',
          			allErrorCount:'',
          			allCount:'',
          			requesterNum:"",
          			sourceAddress:"",
          			destinationAddress:"",
          		},
          		optionPie : {
				    title : {
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        type: 'scroll',
				        orient: 'vertical',
				        right: 10,
				        top: 20,
				        bottom: 20,
				        
				    },
				    color:[],
				    series : [
				        {
				            name: '请求次数',
				            type: 'pie',
				            radius : '55%',
				            radius: ['50%', '70%'],
				            center: ['40%', '50%'],
				            data: [
				                ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				},
				optionBar :{
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : ['1月','','','4月','','','7月','','','10月','','12月'],
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'直接访问',
				            type:'bar',
				            barWidth: '30%',
				            data:[],
				            itemStyle:{
				                  normal:{
				                    color:'#0090ff',
				                     barBorderRadius:[10, 10, 10, 10],
				                  }, //柱形图圆角，初始化效果
				                 
				
				            }
				
				        }
				    ]
				},
				optionRadra:{
				    tooltip: {},
				    legend: {
//				        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
				    },
				    color:["#ff9c00",'#0090ff'],
				    radar: {
				        // shape: 'circle',
				        name: {
				            textStyle: {
				                color: '#fff',
				                backgroundColor: '#999',
				                borderRadius: 3,
				                padding: [3, 5]
				           }
				        },
				        indicator: [
				           
				        ]
				    },
				    series: [{
				        type: 'radar',
				        // areaStyle: {normal: {}},
				        data : [
				            {
				                value : [],
				                name : '服务质量（Service Quality）',
				                areaStyle: {
				                        normal: {
				                            opacity: 0.2,
				                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
				                                {
				                                    color: '#ff9c00',
				                                    offset: 1,
				                                    opacity:0.1
				                                },
				                            ])
				                        }
				                }
				            },
				            {
				                value : [],
				                name : '平均服务质量（平均值）',
				                     areaStyle: {
				                        normal: {
				                            opacity: 0.2,
				                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
				                                {
				                                  color: '#0090ff',
				                                  offset: 0,
				                                  opacity:0.1
				                                },
				                                
				                            ])
				                        }
				                    }
				            }
				        ]
				    }]
				},
				optionLine :{
				    xAxis: {
				        type: 'category',
				        data: [ '1月', '', '', '4月', '','6月', '', '', '9月', '', '', '12月']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
					    {
					        data: [],
					        type: 'line',
					        symbol: "circle",
					        symbolSize: 10,
					        lineStyle: {
					            normal: {
					                color: '#0090ff',
					                width: 4,
					            }
					        },
					        itemStyle: {
					            normal: {
					                borderWidth: 2,
					                borderColor: 'white',
					                color: '#0090ff'
					            }
					        }
					    }
				    ]
				},
				optionLine2 :{
				    xAxis: {
				        type: 'category',
				        data: [ '1', '', '', '4', '','', '7',
				        		 '', '', '10', '', '','13',
				        		 '','','16','','','19',
				        		 '','','22','','','25',
				        		 '','','28','','','31',
				        	  ]
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
					    {
					        data: [],
					        type: 'line',
					        symbol: "circle",
					        symbolSize: 10,
					        lineStyle: {
					            normal: {
					                color: '#0090ff',
					                width: 4,
					            }
					        },
					        itemStyle: {
					            normal: {
					                borderWidth: 2,
					                borderColor: 'white',
					                color: '#0090ff'
					            }
					        }
					    },
					    {
					        data: [],
					        type: 'line',
					        symbol: "circle",
					        symbolSize: 10,
					        lineStyle: {
					            normal: {
					                color: '#ff9c00',
					                width: 4,
					            }
					        },
					        itemStyle: {
					            normal: {
					                borderWidth: 2,
					                borderColor: 'white',
					                color: '#ff9c00'
					            }
					        }
					    }
				    ]
				},
          		
          };
        },
        methods: {
        		getAllData(){
        			computedGetBaseInfo(this,this.danganId);/*基本信息*/
        			computedRequestCount(this,this.danganId);/*请求汇总*/
        			computedServiceQuality(this,this.danganId,this.nowYear);/*服务质量*/
        			computedHealth(this,this.danganId,this.nowYear,this.nowMonth);/*健康日志*/
        			computedApplyTime(this,this.danganId,this.nowYear)/*响应时间*/
        			computedRequestTotal(this,this.danganId)/*请求方统计*/
        			computedRequestCountTime(this,this.danganId,this.nowYear);/*请求次数*/
        		},
        		getPaiMingBegin(){
        			copmutedPaiMing(this,this.danganId,this.paimingOption[0].id)/*同类排名*/
        		},
        		changeHealthyRiChooseYue(val){/*健康日志选时间*/
        			this.nowYear = val.split('-')[0];
        			this.nowMonth = val.split('-')[1];
        			computedHealth(this,this.danganId,this.nowYear,this.nowMonth);/*健康日志*/
        		},
        		changeSamePaimingSelect(val){/*排名选类别*/
        			console.log(val);
        			copmutedPaiMing(this,this.danganId,val)/*同类排名*/
        		},
        		changeserverQualityChooseYear(val){/*服务质量选时间*/
        			computedServiceQuality(this,this.danganId,val);
        		},
        		changeApplyTimeChooseYear(val){/*响应时间选时间*/
        			console.log(val);
        			computedApplyTime(this,this.danganId,val)/*响应时间*/
        		},
        		changeRequestTime(val){/*请求次数选时间*/
        			computedRequestCountTime(this,this.danganId,val);
        		}
        },
        mounted(){
        	
			var myDate = new Date();
			this.nowYear = myDate.getFullYear(); 
			this.nowMonth = Number(myDate.getMonth())+1;
			this.getAllData();
        },
        watch:{
        	danganId(newVal){
        		Object.assign(this.$data, this.$options.data())/*重置data数据*/
        		this.getAllData(); 
        	}
        }
  };
</script>

<style scoped="scoped">
	.healthy_riji_title{
		position: absolute;
	    font-size: 13px;
	    top: 13px;
	    left: 100px;
	}
	.healthy_riji_title .fuwuzhiliang {
	    width: 19px;
	    height: 4px;
	    display: inline-block;
	    background: orange;
	    vertical-align: super;
	    border-radius: 4px;
	    margin-right: 5px;
	}
	
	.healthy_riji_title .pingjunfuwuzhiliang{
		 width: 19px;
	    height: 4px;
	    display: inline-block;
	    background: #0090FF;
	    vertical-align: super;
	    border-radius: 4px;
	    margin-right: 5px;
	}
	
	.diy_echart_healthy_riji {
	    margin-top: -40px;
	}
	.diy_echart_request_time{
		margin-top: -30px;
	}
	.diy_echart_apply_time {
		margin-top: -30px;
	}
	.diy_echart_request_total{
			margin-top: -25px;
	}
	/****************************************/
	
	.healthy_riji{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 270px;
		margin-top: 10px;
		background: #fff;
	}
	.chooseYue{
		position: absolute;
	    top: 7px;
	    right: 15px;
	    z-index: 1;
	}
	   
	/***********************************************/
	
	
	@media only screen and (min-width: 1600px) and (max-width:1920px){
	span.dangan_guiji_span-9.dangan_guiji_span {
		top: 136px;
    	left: 173px;
	    color: #fff;
	}
	span.dangan_guiji_span-8.dangan_guiji_span {
        left: 56px;
    	top: 112px;
	}
	span.dangan_guiji_span-7.dangan_guiji_span {
            left: 78px;
    		top: 226px;
	}
	span.dangan_guiji_span-6.dangan_guiji_span {
   		    left: 197px;
    		top: 258px;

	}
	span.dangan_guiji_span-5.dangan_guiji_span {
	       top: 259px;
    		left: 327px;
	}
	span.dangan_guiji_span-3.dangan_guiji_span {
	        left: 358px;
    		top: 140px;
	}
	span.dangan_guiji_span-4.dangan_guiji_span {
	        left: 405px;
    		top: 192px;
	}
	span.dangan_guiji_span-2.dangan_guiji_span {
	       top: 75px;
    		left: 258px;
	}
	span.dangan_guiji_span-1.dangan_guiji_span{
	    top: 45px;
    	left: 193px;
	}
	.guding-500 {
		position: absolute;
	    width: 525px;
	    margin: auto;
	    height: 380px;
	    left: 0;
	    right: 0;
	    top: 30px;
	    bottom: 0;
	}
	}

	
	/*************媒体查询****************/
	@media screen and (min-width: 1366px) and (max-width:1599px) {
	   	.guding-500 {
			    position: absolute;
			    width: 420px;
			    margin: auto;
			    height: 240px;
			    top: 0;
			    right: 0;
			    left: 0;
			    bottom: 0;
		}
		span.dangan_guiji_span-9.dangan_guiji_span {
			    top: 103px;
   				 left: 132px;
		}
		
		span.dangan_guiji_span-1.dangan_guiji_span{
		        top: 34px;
    		left: 150px;
		}
		span.dangan_guiji_span-8.dangan_guiji_span {
        	    left: 50px;
    			top: 86px;
		}
		span.dangan_guiji_span-7.dangan_guiji_span {
	            left: 58px;
    			top: 176px;
		}
		span.dangan_guiji_span-6.dangan_guiji_span {
	   		    left: 152px;
    			top: 204px;
		}
		span.dangan_guiji_span-5.dangan_guiji_span {
		      top: 203px;
    			left: 257px;
		}
		span.dangan_guiji_span-3.dangan_guiji_span {
		         left: 284px;
    			top: 109px;
		}
		span.dangan_guiji_span-4.dangan_guiji_span {
		        left: 317px;
			    top: 150px;
			    width: 120px;
		}
		span.dangan_guiji_span-2.dangan_guiji_span {
		     top: 60px;
    		left: 196px;

		}
	}

	.dangan_guiji_span{
		position: absolute;
		font-size: 12px;
		color: #333;
	}
	/***********************************/
	.dangan_guiji{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		background: #fff;
		height: 430px;
	}
	.apply_time{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 170px;
		background: #fff;
		margin-top: 10px;
	}
	
	/*************************************/
	.server_quarce_title {
	    position: absolute;
	    top: 15px;
	    width: 300px;
	    left: 50%;
	    margin-left: -150px;
	}
	.server_quarce_title i.fuwuzhiliang{
		background: #ff9c00;
	}
	.server_quarce_title i.pingjunfuwuzhiliang{
		background: #0090ff;
	}
	.server_quarce_title i {
	    display: inline-block;
	    width: 19px;
	    height: 6px;
	    border-radius: 3px;
	    vertical-align: super;
	    /* line-height: 10px; */
	    height: 5px;
	    margin: 0 5px 0 20px;
	}
	.server_quarce_title {
	    text-align: center;
	    font-size: 13px;
	}
	.server_quarce{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 270px;
		margin-top: 10px;
		background: #fff;
	}
	/*************************/
	.chooseDate {
	    position: absolute;
	    right: 30px;
	    top: 10px;
	        z-index: 1;
	}
	.request_time{
		margin-top: 10px;
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 210px;
		background: #fff;
	}
	/****************************/
	span.request_total_detail_pie {
	    display: inline-block;
	    width: 10px;
	    height: 10px;
	    border-radius: 50%;
	    vertical-align: baseline;
	    margin-right: 10px;
	}
	.request_total_detail p{
		margin: 10px 0;
	}
	.request_total_detail {
	    position: absolute;
	    top: 30px;
	    right: 15px;
	    font-size: 14px;
	}
	.request_total{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 210px;
		background: #fff;
	}
	/******************/
	.same_paiming_row.el-row {
	    margin: 5px 0;
	}
	.same_paiming .left_item_title{
		margin: 10px 0;
	}
	.same_paiming{
		margin-top: 10px;
		font-size: 16px;
		padding: 10px 15px;
		height: 170px;
		position: relative;
		background: #fff;
	}
	.same_paiming_select{
		    position: absolute;
		    right: 15px;
		    top: 10px;
	}
	
	/****************************/
	.all_time .all_time_text{
		margin-bottom: 12px;
	}
	.all_time .all_time_num{
		font-size: 30px;
	}
	.all_time_num{
	    text-align: center;
	    font-size: 20px;
	    color: #2576c5;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.all_time_text{
		text-align: center;
	}
	.request_all .left_item_title{
		margin: 10px 0;
	}
	.request_all .all_time {
	    margin-top: -15px;
	}
	.request_all .el-row{
		margin-top: -7px;
	}
	.request_all{
		margin-top: 10px;
		font-size: 16px;
		padding: 10px 15px;
		height: 170px;
		background: #fff;
	}
	
	/*****************************/
	
	span.span_text {
	    margin-right: 25px;
	}
	span.span_title {
		    color: #8e8e8e;
		    padding-right: 10px;
		}
	.left_item_title span{
		width: 3px;
	    height: 15px;
	    display: inline-block;
	    background: #2576c5;
	    vertical-align: middle;
	    margin-right: 5px;
	}
	.basc_info p{
		margin: 7px 0;
	}
	.basc_info{
		font-size: 15px;
		padding: 10px 15px;
		height: 170px;
		background: #fff;
	}
/*************************************/
        .layout.flexbox{
          /*margin-top: 15px;*/
          background: #f0f0f0;
          border-top: solid 10px #f0f0f0;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          /*width: 400px;*/
          /*background: red;*/
        }
        .layout.flexbox .center{
          margin: 0 10px;
        }
        .layout.flexbox .right{
          /*width: 470px;*/
          /*background: blue;*/
        }
      </style>
